<template>
	<view class="class">
		<!-- <view class="date_select">
			<lxCalendar @change="change"></lxCalendar>
		</view> -->
		<!-- <u-divider text="课程安排"></u-divider> -->
		<!-- <view class="add_button">
			<u-button text="新增课时" size="normal" type="primary" @click="onCar"></u-button>
		</view> -->
		<view class="class_list">
			<view class="class_list_item" v-for="item in list" :key="item.classHoursId">
				<view class="title">{{ item.type }}</view>
				<!-- <view class="site">
					<text class="item">地点：</text>
					<text>甘肃武威凉州区</text>
				</view> -->
				<view class="startTime">
					<text class="item">授课日期：</text>
					<!-- <u-icon name="clock"></u-icon> -->
					<text>{{ item.applyDate }}</text>
				</view>
				<view class="num">
					<text class="item">课时时长：</text>
					<text>{{ item.classDuration }}（小时）</text>
				</view>
				<view class="num">
					<text class="item">可预约人数：</text>
					<text>{{ item.maxNum }}（人）</text>
				</view>
				<view class="state">
					<text class="item">状态：</text>
					<text class="style">{{ item.state | stateName }}</text>
				</view>
				<view class="state">
					<text class="item">课时内容：</text>
					<text>{{ item.content }}</text>
				</view>

				<view class="set">
					<view class="u-page__button-item" @click="onModify(item.classHoursId)">
						<u-button text="修改" size="small" type="primary"></u-button>
					</view>
					<view class="u-page__button-item" @click="onDelete(item.classHoursId)">
						<u-button text="删除" size="small" type="error"></u-button>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
import { manageClassHours, delClassHours } from '../../common/api'
import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'
export default {
	components: {
		lxCalendar,
	},
	data() {
		return {
			list: []
		}
	},
	filters: {
		stateName: function (value) {
			if (value == 0) {
				return '已安排'
			} else if (value == 1) {
				return '进行中'
			} else if (value == 2) {
				return '已完成'
			} else if (value == 3) {
				return '已取消'
			} else if (value == 4) {
				return '已满员'
			}
		}
	},
	onLoad() {
		this.getManageClassHours()
	},
	methods: {
		change(e) {
			console.log(e);
		},
		onCar() {
			uni.navigateTo({
				url: '/pages/createClassHour/createClassHour'
			});
		},
		// 获取课时列表
		async getManageClassHours() {
			let data = uni.getStorageSync('userData')
			console.log(data, 11111111);
			let coachId = data.user.coachId
			console.log(coachId, 222222);
			let res = await manageClassHours(coachId)
			this.list = res
		},
		// 删除课时
		async onDelete(id) {
			let res = await delClassHours(id)
			uni.$u.toast('删除成功')
			this.getManageClassHours()
		},
		// 修改课时
		onModify(id) {
			uni.navigateTo({
				url: `/pages/createClassHour/createClassHour?classHoursId=${id}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.class {
	.add_button {
		margin: 32rpx;
		width: 200rpx;
	}

	.class_list {
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.class_list_item {
			width: 100%;
			background: #f5f5f5;
			border-radius: 15rpx;
			padding: 20rpx;
			margin-bottom: 32rpx;

			.title {
				font-size: $uni-font-size-medium;
				font-weight: bold;
				margin-bottom: 25rpx;
				text-align: center;
			}

			.site,
			.startTime,
			.endTime,
			.num,
			.state {
				display: flex;
				font-size: $uni-font-size-small;
				margin-bottom: 10rpx;

				.item {
					width: 180rpx;
				}

				text {
					margin-left: 10rpx;
					color: $uni-color-type1;
				}

				.style {
					color: #333;
					font-weight: bold;
				}
			}

			.set {
				width: 100%;
				display: flex;
				justify-content: right;
				margin-top: 32rpx;
				.u-page__button-item {
					margin-left: 20rpx;
				}
			}
		}
	}
}
</style>
